<template>
    <div>
        <!-- 
            Step4.4)条件查询 
            行内表单:在表单中添加 :inline="true" 则表单一行显示 
            :model="searchMap" 绑定data中初始化的条件查询的对象
        -->
        <el-form ref="searchForm" :inline="true" :model="searchMap" style="margin-top: 20px">
            <!-- 重置时会看 el-form-item 组件元素的 prop 上是否指定了字段名，指定了才会重置生效 
            否则重置无效-->
            <el-form-item label="所在省" prop="provinceId">
                    <el-select 
                    v-model="searchMap.provinceId"
                    placeholder="请选择省"
                    @change="provinceIdChenge"
                    >
                    <el-option v-for="(provinceInfo,index) in provinceInfos" 
                    :key="index"
                    :label="provinceInfo.name"
                    :value="provinceInfo.id"
                    ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="所在市" prop="cityId">
                    <el-select 
                    v-model="searchMap.cityId"
                    placeholder="请选择市"
                    @change="cityIdChenge"
                    >
                    <el-option
                    v-for="(cityInfo,index) in cityInfos" 
                    :key="index"
                    :label="cityInfo.name"
                    :value="cityInfo.id"
                    ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在区" prop="areaId">
                    <el-select 
                    v-model="searchMap.areaId"
                    placeholder="请选择区"
                    >
                    <el-option
                    v-for="(areaInfo,index) in areaInfos" 
                    :key="index"
                    :label="areaInfo.name"
                    :value="areaInfo.id"
                    ></el-option>
                </el-select>
                </el-form-item>
                <br>
                <el-form-item label="出租方式" prop="rentMode">
                    <el-radio-group v-model="searchMap.rentMode">
                    <el-radio label="1">整租</el-radio>
                    <el-radio label="2">合租</el-radio>
                    </el-radio-group>
                </el-form-item>
                <br>
                <el-form-item label="租金" prop="rentalList">
                    <el-radio-group v-model="searchMap.rentalList">
                        <el-radio label="0-1000" > 《=1000</el-radio>
                        <el-radio label="1000-1500" >1000—1500</el-radio>
                        <el-radio label="2000-2500" >2000—2500</el-radio>
                        <el-radio label="2500-3000" >2500-3000</el-radio>
                        <el-radio label="3000-3500" >3000-3500</el-radio>
                        <el-radio label="5000-100000" >》=5000</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="户型" prop="houseTypeList">
                    <el-radio-group v-model="searchMap.houseTypeList">
                        <el-radio label="1" >一居室</el-radio>
                        <el-radio label="2" >两居室</el-radio>
                        <el-radio label="3" >三居室</el-radio>
                        <el-radio label="4" >四居室及以上</el-radio>
                    </el-radio-group>
                </el-form-item>
                <br>
                 <el-form-item label="朝向" prop="orientationList">
                    <el-radio-group v-model="searchMap.orientationList">
                        <el-radio label="1" >东</el-radio>
                        <el-radio label="2">西</el-radio>
                        <el-radio label="3">南</el-radio>
                        <el-radio label="4">北</el-radio>
                    </el-radio-group>
                </el-form-item>
           
            <br>
            <el-form-item>
                <el-button type="primary" @click="fetchData">查询</el-button>
                <!-- Step5)新增会员 -->
                <el-button type="primary" @click="handleAdd">新增</el-button>
                <!-- 重置功能， 函数中传递的是 表单的 ref选项-->
                <el-button @click="resetForm('searchForm')">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- //////////////////////////////////////////////////////////////////////////////////////////////////// -->
        <!-- 
            Step4)会员管理，拿取全部数据 
            :data:绑定的数据，肯定是一个数组
            height:表格高度
            border:是否显示边框，如果不写则没有边框
            stripe:是否显示斑马纹 默认true显示
            highlight-current-row:是否高亮当前行 默认true显示
        -->
        <el-table :data="list" height="380" border style="width: 100%" stripe highlight-current-row>
                <!-- type="index"获取索引值，注意从1开始 ，label显示标题，prop 数据字段名，width列宽，如果不设置为自动 -->
                <el-table-column prop="areaName" label="所在区名称" ></el-table-column>
                <el-table-column prop="rentModeName" label="租房方式" ></el-table-column>
                <el-table-column prop="rental" label="租金" ></el-table-column>
                <el-table-column prop="houseTypeName" label="户型名称" ></el-table-column>
                <el-table-column prop="orientationName" label="朝向名称" ></el-table-column>
                <el-table-column prop="address" label="详细地址" ></el-table-column>
                <el-table-column prop="publishDate" label="发布时间" ></el-table-column>                
                <el-table-column label="操作" width="150">
                    <!-- 这里的scope对应el-button中的scope参数 -->
                    <template slot-scope="scope">
                        <!-- 
                            scope.row:可以拿取这一行的数据
                            size:是elementui的button大小，请查阅文档
                            type:显示红色按钮，其它请查阅文档
                        -->
                        <!-- Step6)编辑会员 -->
                        <el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
        </el-table>
        <!-- //////////////////////////////////////////////////////////////////////////////////////////////////// -->
        <!-- 
            4.3)分页组件 
                :current-page="currentPage":绑定的data中的当前页
                :page-sizes="[10, 20, 50]":分别以多少条记录显示
                :page-size="pageSize":绑定data中的每页记录数
                layout="total, sizes, prev, pager, next, jumper":此组件自带子组件，对应分页各个部分，不需要我们自己书写
                :total="total":对应总记录数
                @size-change="handleSizeChange" 表示点击前往第几页时激发
                @current-change="handleCurrentChange" 表示点击 1 2 3 4 ...时激发
        -->
        <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[10, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        <!-- 
            Step5)添加会员
            弹出新增窗口 
            title 窗口的标题 :visible.sync 当它true的时候，窗口会被弹出，false不显示
            width:弹出窗口的宽度
        -->
        <el-dialog title="新增信息" :visible.sync="dialogFormVisible" width="500px">
            <!-- 
                :rules:验证规则  ref:类似id值 label-width:文本的宽度
                :model:对应绑定的对象
            -->
            <el-form :rules="rules" ref="pojoForm" label-width="100px" label-position="right" style="width: 400px;"
            :model="addpojo">
                <el-form-item label="所在省" prop="provinceId">
                    <el-select 
                    v-model="addpojo.provinceId"
                    placeholder="请选择省"
                    @change="provinceIdChenge"
                    >
                    <el-option v-for="(provinceInfo,index) in provinceInfos" 
                    :key="index"
                    :label="provinceInfo.name"
                    :value="provinceInfo.id"
                    ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="所在市" prop="cityId">
                    <el-select 
                    v-model="addpojo.cityId"
                    placeholder="请选择市"
                    @change="cityIdChenge"
                    >
                    <el-option
                    v-for="(cityInfo,index) in cityInfos" 
                    :key="index"
                    :label="cityInfo.name"
                    :value="cityInfo.id"
                    ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在区" prop="areaId">
                    <el-select 
                    v-model="addpojo.areaId"
                    placeholder="请选择区"
                    >
                    <el-option
                    v-for="(areaInfo,index) in areaInfos" 
                    :key="index"
                    :label="areaInfo.name"
                    :value="areaInfo.id"
                    ></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="出租方式" prop="rentMode">
                    <el-radio-group v-model="addpojo.rentMode">
                    <el-radio label="1">整租</el-radio>
                    <el-radio label="2">合租</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="租金" prop="rental" >
                    <el-input v-model="addpojo.rental"></el-input>
                </el-form-item>

                <el-form-item label="户型" prop="houseType">
                    <el-radio-group v-model="addpojo.houseType">
                        <el-radio label="1" >一居室</el-radio>
                        <el-radio label="2" >两居室</el-radio>
                        <el-radio label="3" >三居室</el-radio>
                        <el-radio label="4" >四居室及以上</el-radio>
                    </el-radio-group>
                </el-form-item>
                 <el-form-item label="朝向" prop="orientation">
                    <el-radio-group v-model="addpojo.orientation">
                        <el-radio label="1" >东</el-radio>
                        <el-radio label="2">西</el-radio>
                        <el-radio label="3">南</el-radio>
                        <el-radio label="4">北</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="详细地址" prop="address" >
                    <el-input v-model="addpojo.address"></el-input>
                </el-form-item>
                <el-form-item label="发布时间" prop="publishDate">
                <el-date-picker style="width: 200px" value-format="yyyy-MM-dd" v-model="addpojo.publishDate"  
                type="date" placeholder="发布时间"></el-date-picker>
                 </el-form-item>
                <el-form-item  prop="addname" >
                    <el-input v-model="addpojo.addname" type="hidden"></el-input>
                </el-form-item>
                 
            </el-form>
           
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible=false">取消</el-button>
                <!-- 传递的参数对应 ref属性 -->
                <!-- 
                    Step5)会员添加
                    <el-button type="primary" @click="addData('pojoForm')">确定</el-button> 
                -->
                <!-- 
                    Step6) 
                    此处根据id是否有具体值来判断是新增还是编辑，
                    因为复用的弹出框，要区分新增还是编辑
                        1:没有id 则表示新增，因为新增是不需要id值，后台有主键
                        2:有id 则表示编辑，从后台获取的数据，肯定存在id值
                -->
                <el-button type="primary" @click="addData('pojoForm')">确定</el-button>
                
            </div>
        </el-dialog>
        <el-dialog title="修改信息" :visible.sync="editFormVisible" width="500px">
            <!-- 
                :rules:验证规则  ref:类似id值 label-width:文本的宽度
                :model:对应绑定的对象
            -->
            <el-form :rules="rules" ref="pojoForm" label-width="100px" label-position="right" style="width: 400px;"
            :model="addpojo">
                <el-form-item label="出租方式" prop="rentMode">
                    <el-radio-group v-model="addpojo.rentMode">
                    <el-radio label="1">整租</el-radio>
                    <el-radio label="2">合租</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="租金" prop="rental" >
                    <el-input v-model="addpojo.rental"></el-input>
                </el-form-item>

                <el-form-item label="户型" prop="houseType">
                    <el-radio-group v-model="addpojo.houseType">
                        <el-radio label="1" >一居室</el-radio>
                        <el-radio label="2" >两居室</el-radio>
                        <el-radio label="3" >三居室</el-radio>
                        <el-radio label="4" >四居室及以上</el-radio>
                    </el-radio-group>
                </el-form-item>
                     
            </el-form>
           
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible=false">取消</el-button>
                <!-- 传递的参数对应 ref属性 -->
                <!-- 
                    Step5)会员添加
                    <el-button type="primary" @click="addData('pojoForm')">确定</el-button> 
                -->
                <!-- 
                    Step6) 
                    此处根据id是否有具体值来判断是新增还是编辑，
                    因为复用的弹出框，要区分新增还是编辑
                        1:没有id 则表示新增，因为新增是不需要id值，后台有主键
                        2:有id 则表示编辑，从后台获取的数据，肯定存在id值
                -->
                <el-button type="primary" @click="updateData('pojoForm')">确定</el-button>
                
            </div>
        </el-dialog>
    </div>
</template>

<script>
    /* 
        Step4)会员管理
    */
    import memberApi from '@/api/member'
    //import memberApi from '../../api/member'
    /* Step4.2)过滤器用来过滤支付方式，注意过滤器filter必须使用成员变量的方式，不能初始化到
    data中，因为无法使用this.拿取 */
    const payTypeOptions = [
        {type: '1', name: '现金'},
        {type: '2', name: '微信'},
        {type: '3', name: '支付宝'},
        {type: '4', name: '银行卡'},
    ]

    export default {
        /* Step4.1)获取数据 */
        data(){
            return {
                list:[],
                /* Step4.3)分页 */
                /* 总记录数 */
                total:0,
                provinceInfos:[],
                cityInfos:[],
                areaInfos:[],
                /* 当前页 */
                currentPage:1,
                /* 每页记录数 */
                pageSize:10,
                /* 条件查询绑定的条件值 */
                searchMap:{
                    /* 注意要设置默认值，否则查询选项会卡死 */
                   provinceId:'',
                   cityId:'',
                   areaId:'',
                   rentMode:'',
                   rentalList:'',
                   houseTypeList:'',
                   orientationList:'',
                },
                /* Step4.4)条件查询的值 */
                payTypeOptions,
                /* Step5)新增会员 */
                /* 变为true时对话框才显示 */
                dialogFormVisible:false,
                editFormVisible:false,
                /* 新增表单默认的值 */ 
                addpojo: {
                    /* 注意此值可以在弹出框中区分是新增功能还是编辑功能 */
                    id:null,
                    provinceId:'',
                    cityId:'',
                    areaId:'',
                    rentMode:'',
                    rental:'',
                    houseType:'',
                    orientation:'',
                    address:'',
                    publishDate:'',
                    addname:'wh521521'
                },

                /* 校检规则 */
                rules: { 
                    number_card: [
                        {required: true, message: '卡号不能为空', trigger: 'blur'}
                    ],
                    number_name: [
                        {required: true, message: '姓名不能为空', trigger: 'blur'}
                    ],
                    pay_type: [
                        {required: true, message: '支付类型不能为空', trigger: 'change'}
                    ]
                }
            }
        },
        created(){
            /* 
                Step4.1)获取数据
            */
            this.fetchData()
        },

        methods:{
            /* 获取市信息 */
            provinceIdChenge(id){
                console.log(id)
                 memberApi.getprovinceInfo(id).then(response =>{
                    const resp = response.data
                    /* 查询成功 */
                    if(resp.flag) {
                        /* 将数据赋值给表单，因为是双向绑定，所以表单项中显示的就是查到的数据 */
                        this.cityInfos = resp.data
                    }
                })
            },
            cityIdChenge(id){
                 memberApi.getprovinceInfo(id).then(response =>{
                    const resp = response.data
                    /* 查询成功 */
                    if(resp.flag) {
                        /* 将数据赋值给表单，因为是双向绑定，所以表单项中显示的就是查到的数据 */
                        this.areaInfos = resp.data
                    }
                })
            },
            
            /* 
                Step4.1)获取数据
            */
            fetchData(){
                /* Step4.1)无分页获取数据 */
                //memberApi.getList().then(response=>{
                /* 
                    Step4.3)分页
                    通过分页获取数据
                */
               memberApi.getprovinceInfo(0).then(response => {
                    const resp = response.data
                    /* 查询成功 */
                    if(resp.flag) {
                        /* 将数据赋值给表单，因为是双向绑定，所以表单项中显示的就是查到的数据 */
                        this.provinceInfos = resp.data
                    }
                })    
                memberApi.search(this.currentPage, this.pageSize, this.searchMap).then(response =>{
                    const resp = response.data
                    /*  
                        拿取分页数据，这里rows就是那10条记录，因为设置的每页显示10条
                        console.log(resp.data.rows) 
                    */
                    this.list = resp.data
                    /* 拿取总记录数 */
                    this.total = resp.total
                })
            },
            // 当每页显示条数改变后被触发 , val是最新的每页显示条数
            handleSizeChange(val) {
                // console.log(val)
                this.pageSize = val
                /* 调整数据后重新查询 */
                this.fetchData()
            },
            // 当页码改变后被触发,val是最新的每页记录数
            handleCurrentChange(val) {
                // console.log(val)
                this.currentPage = val
                /* 调整数据后重新查询 */
                this.fetchData()
            },
            //重置
            resetForm(formName) {
                //console.log('重置', formName)
                // 重置会看 el-form-item 组件元素的 prop 上是否指定了字段名，指定了才会重置生效
                this.$refs[formName].resetFields()
            },
            /* 
                Step5)向后台提交新增数据
                    注意这里的formName是形参
            */
            addData(formName) {
                /* 提交后进行验证 */
                this.$refs[formName].validate(valid => {
                    /* 如果验证成功 */
                    if(valid){
                        //提交表单
                        console.log('addData')
                        memberApi.add(this.addpojo).then(response => {
                            console.log(response)
                            const resp = response.data
                            if(resp.flag) {
                                /* 新增成功后回显，所以这里观察network第二个是重新刷新页面的请求 */
                                this.fetchData()
                                this.dialogFormVisible = false // 关闭窗口
                            }else {
                                // 失败，来点提示信息
                                this.$message({
                                    message: resp.msg,
                                    type: 'warning'
                                })
                            }
                        })
                    }else {
                        return false
                    }
                })
            },
            /* Step5)新增对话框*/
            handleAdd() {
                console.log(this.pojo)
                // this.pojo = {}
                this.dialogFormVisible = true
                memberApi.getprovinceInfo(0).then(response => {
                    const resp = response.data
                    /* 查询成功 */
                    if(resp.flag) {
                        /* 将数据赋值给表单，因为是双向绑定，所以表单项中显示的就是查到的数据 */
                        this.provinceInfos = resp.data
                    }
                })
                /* 每次打开新增对话框都清空原先填写的内容，去掉之前验证遗留的样式 */
                this.$nextTick(() => { 
                    // this.$nextTick()它是一个异步事件，当渲染结束 之后 ，它的回调函数才会被执行
                    // 弹出窗口打开之后 ，需要加载Dom, 就需要花费一点时间，我们就应该等待它加载完dom之后，再进行调用resetFields方法，重置表单和清除样式
                    this.$refs['pojoForm'].resetFields()
                })
            },
            /* Step6)编辑会员 */
            /* 点击按钮打开编辑弹出框 */
            handleEdit(id){
                console.log('编辑', id)
                /* 复用handleAdd()首先打开对话框，之后清空原先的内容和验证样式 */
                this.editFormVisible = true
                memberApi.getprovinceInfo(0).then(response => {
                    const resp = response.data
                    /* 查询成功 */
                    if(resp.flag) {
                        /* 将数据赋值给表单，因为是双向绑定，所以表单项中显示的就是查到的数据 */
                        this.provinceInfos = resp.data
                    }
                })
                this.$nextTick(() => { 
                    // this.$nextTick()它是一个异步事件，当渲染结束 之后 ，它的回调函数才会被执行
                    // 弹出窗口打开之后 ，需要加载Dom, 就需要花费一点时间，我们就应该等待它加载完dom之后，再进行调用resetFields方法，重置表单和清除样式
                    this.$refs['pojoForm'].resetFields()
                })
                console.log(this.addpojo.areaId)
                
                /* 根据id开始查询要修改的数据 */
                memberApi.getById(id).then(response => {
                    const resp = response.data
                    /* 查询成功 */
                    if(resp.flag) {
                        /* 将数据赋值给表单，因为是双向绑定，所以表单项中显示的就是查到的数据 */
                        this.addpojo = resp.data
                        memberApi.getprovinceInfo(this.addpojo.provinceId).then(response => {
                            const resp = response.data
                            console.log(resp.data)
                            /* 查询成功 */
                            if(resp.flag) {
                                /* 将数据赋值给表单，因为是双向绑定，所以表单项中显示的就是查到的数据 areaInfos*/
                                this.cityInfos = resp.data
                            }
                        })
                        memberApi.getprovinceInfo(this.addpojo.cityId).then(response => {
                            const resp = response.data
                            /* 查询成功 */
                            if(resp.flag) {
                                /* 将数据赋值给表单，因为是双向绑定，所以表单项中显示的就是查到的数据 */
                                this.areaInfos = resp.data
                            }
                        })
                    }
                })
            },
            /* 点击确定结束编辑 */
            updateData(formName) {
                console.log('updateData')
                this.$refs[formName].validate(valid => {
                    /* 弹出框验证通过 */
                    if(valid){
                        /* 向后台发送更新的数据 */
                        memberApi.update(this.addpojo).then(response => {
                            const resp = response.data
                            /* 更新成功 */
                            if(resp.flag) {
                                /* 数据回显 */
                                this.fetchData()
                                /* 关闭对话框 */
                                this.editFormVisible = false
                            }else {
                                /* 编辑失败弹出警示 */
                                this.$message({
                                    message: resp.msg,
                                    type: 'warning'
                                })
                            }
                        })
                    }else {
                        /* 验证失败 */
                        return false
                    }
                })
            },
            /* Step6)删除会员 */
            handleDelete(id){
                console.log('删除', id)
                /* 参加弹框组件 */
                this.$confirm('确认删除这条记录吗？', '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                }).then(() => {
                    /* 选择的是确认 */
                    console.log('确认')
                    memberApi.deleteById(id).then(response => {
                        // console.log(response)
                        const resp = response.data
                        /* 根据删除成功或者失败进行何种弹出框的判断 */
                        this.$message({
                            message: resp.message,
                            type: resp.flag ? 'success': 'error'
                        })
                        if(resp.flag) {
                            /* 删除成功回显数据 */
                            this.fetchData()
                        }
                    })
                }).catch(() => {
                    // 取消，无需理睬，自动关闭对话框
                    console.log('取消')
                })
            }
        },
        filters:{
            /* 
                Step4.2)支付方式过滤器 
                type:表示传入的值，也就是前面的字符串 1 2 3 4
            */
            payTypeFilter (type) {
                /*  
                    payTypeOptions.find(obj => {
                        return obj.type === type
                    })
                    
                    find():被数组调用，返回第一个符合设置的条件的数组元素
                */
                // 在过滤器当中不能引用当前实例 this，this.payTypeOptions 错误的
                const payObj = payTypeOptions.find(obj => obj.type === type)
                /* 如果有名字则返回，否则返回null，这里会返回支付的具体方式而不再是 1 2 3 4 */
                return payObj ? payObj.number_name : null
            }
        }
    }
</script>

<style scoped>
    
</style>